import React, { useState } from 'react';
import { Modal, Button, Select, Input, Form, Space } from 'antd';
import { Des } from './Des'
const { Option } = Select;
export default function Cet_4() {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [desVisible, setDesVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const onFinish = (value) => {
        console.log(value);

    }

    return (
        <>
            <Button type="primary" onClick={showModal}>
                报名
            </Button>
            <Modal title="个人信息" visible={isModalVisible} onCancel={handleCancel} footer={null}>
                <Form
                    name="addRoleForm"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                    onFinishFailed={() => { console.log("表单提交失败"); }}
                    autoComplete="off"
                >
                    <Form.Item
                        name="item"
                        label="证件类型"
                        rules={[{ required: false }]}
                        preserve={false}
                    >
                        <Select
                            showSearch
                            style={{ width: 200 }}
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                            filterSort={(optionA, optionB) =>
                                optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
                            }
                        >
                            <Option value="1">中华人民共和国居民身份证</Option>
                            <Option value="2">台湾居民往来大陆通行证</Option>
                            <Option value="3">港澳台来往内地通行证</Option>
                            <Option value="4">护照</Option>
                            <Option value="5">香港身份证</Option>
                            <Option value="6">澳门身份证</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        name="number"
                        label="证件号码"
                        rules={[{ required: false }]}
                        preserve={false}
                    >
                        {<Input />}
                    </Form.Item>
                    <Form.Item
                        name="name"
                        label="姓名"
                        rules={[{ required: false }]}
                        preserve={false}
                    >
                        {<Input />}
                    </Form.Item>
                    <Form.Item>
                        <div
                            style={{
                                textAlign: 'right',
                            }}
                        >
                            <Space>
                                <Button onClick={() => { setIsModalVisible(false) }} style={{ marginRight: 8 }}>
                                    取消
                                </Button>
                                <Button type="primary" htmlType="submit">
                                    确认
                                </Button>
                                <Des></Des>
                            </Space>

                        </div>

                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
}
export { Cet_4 }


